<template>
    <!-- 页面全局配置 -->
    <view class="pageconfig">
        <!--vuetop-->
        <view class="flex1  padding-sm   flex flex-wrap  ">
			<view>            
			<text class="text2 "> 自定义菜品信息  </text>             
			<button class="transition-all radius cu-btn sm radius "
			 :class="showComponent === true ? 'qm-red' : 'qm-blue'"
			 @click.stop="bgChange()"> 切换模式 </button>
			</view>
<!--            <view class="flex3  text-gray text-center padding-xs   flex flex-wrap justify-between ">
                <view :class="[selectid==1?'active':'']" @click.stop="chooseid(1)" class="flex4  padding-xs   flex flex-wrap justify-center ">
                    <text class="text5 "> 违法违规</text>
                </view>
                <view :class="[selectid==2?'active':'']" @click.stop="chooseid(2)" class="flex6  padding-xs   flex flex-wrap justify-center ">
                    <text class="text7 "> 色情低俗</text>
                </view>
                <view :class="[selectid==3?'active':'']" @click.stop="chooseid(3)" class="flex8  padding-xs   flex flex-wrap justify-center ">
                    <text class="text9 "> 诈骗信息</text>
                </view>
                <view :class="[selectid==4?'active':'']" @click.stop="chooseid(4)" class="flex10  padding-xs   flex flex-wrap justify-center ">
                    <text class="text11 "> 不实信息</text>
                </view>
                <view :class="[selectid==5?'active':'']" @click.stop="chooseid(5)" class="flex12  padding-xs   flex flex-wrap justify-center ">
                    <text class="text13 "> 站外交易</text>
                </view>
                <view :class="[selectid==8?'active':'']" @click.stop="chooseid(8)" class="flex14  padding-xs   flex flex-wrap justify-center ">
                    <text class="text15 "> 售卖假货</text>
                </view>
                <view :class="[selectid==0?'active':'']" @click.stop="chooseid(0)" class="flex16  padding-xs   flex flex-wrap justify-center ">
                    <text class="text17 "> 冒充他人</text>
                </view>
                <view :class="[selectid==6?'active':'']" @click.stop="chooseid(6)" class="flex18  padding-xs   flex flex-wrap justify-center ">
                    <text class="text19 "> 谩骂攻击</text>
                </view>
                <view :class="[selectid==7?'active':'']" @click.stop="chooseid(7)" class="flex20  padding-xs   flex flex-wrap justify-center ">
                    <text class="text21 "> 涉及未成年</text>
                </view>
                <view :class="[selectid==10?'active':'']" @click.stop="chooseid(10)" class="flex22  padding-xs   flex flex-wrap justify-center ">
                    <text class="text23 "> 底差广告</text>
                </view>
                <view :class="[selectid==9?'active':'']" @click.stop="chooseid(9)" class="flex24  padding-xs   flex flex-wrap justify-center ">
                    <text class="text25 "> 信誉不实</text>
                </view>
                <view :class="[selectid==11?'active':'']" @click.stop="chooseid(11)" class="flex26  padding-xs   flex flex-wrap justify-center ">
                    <text class="text27 "> 其他</text>
                </view>
                <view :class="[selectid==11?'active':'']" @click.stop="chooseid(11)" class="flex28  padding-xs   flex flex-wrap justify-center ">
                    <text class="text29 "> 其他</text>
                </view>
            </view> -->
			
			  <view class="flex3 text-gray text-center padding-xs flex flex-wrap justify-between">
			    <!-- 使用 v-for 遍历 items 数组 -->
			    <view 
			      v-for="(item, index) in items" 
			      :key="index"
			      :class="[selectid.includes (item.id) ? 'active' : '', 'flex4']"
			      @click.stop="chooseid(item.id)"
			      class="padding-xs flex flex-wrap justify-center flex4"
			    >
			      <text class="text">{{ item.text }}</text>
			    </view>
			  </view>
			  

			{{ selectid }}
            <view class="flex31    flex align-start  ">
            </view>
            <view class="flex32    flex align-start  ">
            </view>
            <view  v-if="!showComponent" class="flex33  padding-xs   flex flex-wrap  ">
                <view class="flex34  padding-xs   flex flex-wrap justify-between ">
                    <text> 添加菜单</text>
                    <text class="text36 "> 0/200</text>
                </view>
                <view class="flex37  padding-xs   flex flex-wrap  ">
                    <view class="textarea38 ">
                        <view class="cu-form-group ">
                            <textarea rows="4" name="onetext38" maxlength="-1" style=" color:#777;" placeholder="菜名名称 口味(辣/甜...)" v-model="subText"></textarea>
                        </view>
                    </view>
                </view>
                <view class="flex39  padding-xs   flex flex-wrap  ">
                </view>
                <button class="onebutton40  round cu-btn lg round bg-green"> 提交</button>
            </view>
			<view  v-if="showComponent" class="flex33  padding-xs   flex flex-wrap  ">
			        <view class="flex34  padding-xs   flex flex-wrap justify-between ">
			            <text> 随机</text>
			            <text class="text36 "> 0/200</text>
			        </view>
			        <view class="flex37  padding-xs   flex flex-wrap  ">
			            <view class="textarea38 ">
			                <view class="cu-form-group ">
			                    <textarea rows="4" name="onetext38" maxlength="-1" style=" color:#777;" placeholder="菜名名称 口味(辣/甜...)" v-model="subText"></textarea>
			                </view>
			            </view>
			        </view>
			        <view class="flex39  padding-xs   flex flex-wrap  ">
			        </view>
			        <button class="onebutton40  round cu-btn lg round bg-green"> 提交</button>
			    </view>
        </view>
		
		</view>

        <!--vuebottom-->
    </view>
</template>

<script>
    import Vue from 'vue'
import { login } from '../../api/login';
    export default {
        data() {
            return {
			  // showComponent: false,
			  showComponent: true,
              selectid: [0],
			  loginId: '',
			  subText: '',
		      items: [
		        { id: 1, text: '违法违1规'}
		      ]
            };
        },
        onLoad(option) {


        },
	    created() {
		// 在这里执行页面加载时需要执行的方法
			this.getLoginId();
			this.getItems();
	    },
        methods: {
			bgChange(){
				this.showComponent = !this.showComponent
			},
			getLoginId(){
				wx.login({
					success: res => {
						if (res.code) {
							this.loginId = res.code
							console.log(this.loginId)
						}  
				} })
			},
			random(){
				  for (let i = 0; i < 50; i++) {

						setTimeout(() => {
							// 每次迭代的延迟时间逐渐增加
							const index = Math.floor(Math.random() * this.items.length);
							this.selectid = [index]
						  console.log(i);
						}, i * 100);
				  }
				  for (let i = 1; i < 4; i++) {
				  
						setTimeout(() => {
							// 每次迭代的延迟时间逐渐增加
							const index = Math.floor(Math.random() * this.items.length);
							this.selectid = [index]
						  console.log(i);
						}, 5200 + 200 * i * i);
				  }
			},
			getItems(){
				this.items = [
		        { id: 1, text: '违法违1规'},
		        { id: 2, text: '色情低俗'},
		        { id: 3, text: '诈骗信息'},
		        { id: 4, text: '不实信息'},
		        { id: 5, text: '站外交易'},
		        { id: 8, text: '售卖假货'},
		        { id: 0, text: '冒充他人'},
		        { id: 6, text: '谩骂攻击'},
		        { id: 7, text: '涉及未成年'},
		        { id: 10, text: '底差广告'},
		        { id: 9, text: '信誉不实'},
		        { id: 11, text: '其他'},
				{ id: 6, text: '谩骂攻击'},
				{ id: 7, text: '涉及未成年'},
				{ id: 10, text: '底差广告'},
				{ id: 9, text: '信誉不实'},
				{ id: 11, text: '其他'},
				{ id: 11, text: '其他'}
		      ]
			},
            chooseid(p) {
                // this.selectid = p;
                console.log(p);
				if ( !this.selectid.includes(p)) {
				    this.selectid.push(p);
				} else{
					const index = this.selectid.indexOf(p);
					if (index !== -1) {
					    this.selectid.splice(index, 1);
					}
				}
            },
		
        }
    }
</script>

<style lang="scss" scoped>
    /**本页全局配置的代码**/
    .pageconfig {
        width: 100%;
        overflow: hidden;
        overflow-y: scroll;
        // height: 100vh;
    }



    /**pagedomcss**/


    .flex1 {
        width: 100%;
    }

    .text2 {
        margin-bottom: 8rpx;
        margin-left: 4rpx;
    }

    .flex3 {
        width: 100%;
        overflow: scroll;
        height: 540rpx;
        text-align: center;
        margin-bottom: 26rpx;
    }

    .flex4 {
        width: 49%;
		height: 60rpx;
        background-color: #e6e7e7;
        margin-bottom: 16rpx;
        border-top-left-radius: 10rpx;
        border-top-right-radius: 10rpx;
        border-bottom-right-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
    }

    .text5 {
        font-size: 24rpx;
        padding-top: 8rpx;
        padding-bottom: 8rpx;
    }

    .flex6 {
        width: 49%;
        background-color: #e6e7e7;
        margin-bottom: 16rpx;
        border-top-left-radius: 10rpx;
        border-top-right-radius: 10rpx;
        border-bottom-right-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
    }

    .text7 {
        font-size: 24rpx;
        padding-top: 8rpx;
        padding-bottom: 8rpx;
    }

    .flex8 {
        width: 49%;
        background-color: #e6e7e7;
        margin-bottom: 16rpx;
        border-top-left-radius: 10rpx;
        border-top-right-radius: 10rpx;
        border-bottom-right-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
    }

    .text9 {
        font-size: 24rpx;
        padding-top: 8rpx;
        padding-bottom: 8rpx;
    }

    .active {
        background-color: #ff4200 !important;
        color: #fff !important;
    }

    .flex10 {
        width: 49%;
        background-color: #e6e7e7;
        margin-bottom: 16rpx;
        border-top-left-radius: 10rpx;
        border-top-right-radius: 10rpx;
        border-bottom-right-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
    }

    .text11 {
        font-size: 24rpx;
        padding-top: 8rpx;
        padding-bottom: 8rpx;
    }

    .flex12 {
        width: 49%;
        background-color: #e6e7e7;
        margin-bottom: 16rpx;
        border-top-left-radius: 10rpx;
        border-top-right-radius: 10rpx;
        border-bottom-right-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
    }

    .text13 {
        font-size: 24rpx;
        padding-top: 8rpx;
        padding-bottom: 8rpx;
    }

    .flex14 {
        width: 49%;
        background-color: #e6e7e7;
        margin-bottom: 16rpx;
        border-top-left-radius: 10rpx;
        border-top-right-radius: 10rpx;
        border-bottom-right-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
    }

    .text15 {
        font-size: 24rpx;
        padding-top: 8rpx;
        padding-bottom: 8rpx;
    }

    .flex16 {
        width: 49%;
        background-color: #e6e7e7;
        margin-bottom: 16rpx;
        border-top-left-radius: 10rpx;
        border-top-right-radius: 10rpx;
        border-bottom-right-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
    }

    .text17 {
        font-size: 24rpx;
        padding-top: 8rpx;
        padding-bottom: 8rpx;
    }

    .flex18 {
        width: 49%;
        background-color: #e6e7e7;
        margin-bottom: 16rpx;
        border-top-left-radius: 10rpx;
        border-top-right-radius: 10rpx;
        border-bottom-right-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
    }

    .text19 {
        font-size: 24rpx;
        padding-top: 8rpx;
        padding-bottom: 8rpx;
    }

    .flex20 {
        width: 49%;
        background-color: #e6e7e7;
        margin-bottom: 16rpx;
        border-top-left-radius: 10rpx;
        border-top-right-radius: 10rpx;
        border-bottom-right-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
    }

    .text21 {
        font-size: 24rpx;
        padding-top: 8rpx;
        padding-bottom: 8rpx;
    }

    .flex22 {
        width: 49%;
        background-color: #e6e7e7;
        margin-bottom: 16rpx;
        border-top-left-radius: 10rpx;
        border-top-right-radius: 10rpx;
        border-bottom-right-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
    }

    .text23 {
        font-size: 24rpx;
        padding-top: 8rpx;
        padding-bottom: 8rpx;
    }

    .flex24 {
        width: 49%;
        background-color: #e6e7e7;
        margin-bottom: 10rpx;
        border-top-left-radius: 10rpx;
        border-top-right-radius: 10rpx;
        border-bottom-right-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
    }

    .text25 {
        font-size: 24rpx;
        padding-top: 8rpx;
        padding-bottom: 8rpx;
    }

    .flex26 {
        width: 49%;
        background-color: #e6e7e7;
        margin-bottom: 10rpx;
        border-top-left-radius: 10rpx;
        border-top-right-radius: 10rpx;
        border-bottom-right-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
    }

    .text27 {
        font-size: 24rpx;
        padding-top: 8rpx;
        padding-bottom: 8rpx;
    }

    .flex28 {
        width: 49%;
        background-color: #e6e7e7;
        margin-bottom: 10rpx;
        border-top-left-radius: 10rpx;
        border-top-right-radius: 10rpx;
        border-bottom-right-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
    }

    .text29 {
        font-size: 24rpx;
        padding-top: 8rpx;
        padding-bottom: 8rpx;
    }

    .flex31 {
        width: 100%;
    }

    .flex32 {
        width: 100%;
    }

    .flex33 {
        width: 100%;
    }

    .flex34 {
        width: 100%;
        margin-top: 0rpx;
        margin-bottom: 16rpx;
        align-content: center;
    }

    .text36 {
        font-size: 24rpx;
        color: #b0b0b0;
    }

    .flex37 {
        width: 100%;
        background-color: #ffffff;
        border-top-left-radius: 12rpx;
        border-top-right-radius: 12rpx;
        border-bottom-right-radius: 12rpx;
        border-bottom-left-radius: 12rpx;
        border: 2rpx solid #f1f1f1;
    }

    .textarea38 {
        width: 100%;
    }

    .flex39 {
        width: 100%;
    }

    .onebutton40 {
        width: 100%;
        background-color: #4d5eff;
        margin-top: 58rpx;
        margin-bottom: 10rpx;
        margin-left: 0rpx;
        margin-right: 0rpx;
        border-top-left-radius: 10rpx;
        border-top-right-radius: 10rpx;
        border-bottom-right-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
        background-color: #4d5eff;
    }
	.radius {
	  float: right; /* 将按钮浮动到右侧 */
	  border-top-left-radius: 10rpx;
	  margin-left: 360rpx;
	}
	.qm-red {
		background-color: #e54d42;
		color: #ffffff;
	}
	.qm-blue {
		color: #cce6ff;
		background-color: #0081ff;
	}
	.transition-all {
	  transition: all 0.3s ease-in-out;
	}
</style>